<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
    </div>
    <!-- 上拉下加载 -->
    <van-list
      v-model="loading"
      :finished='done'
      @load="pullMoreFn"
    >
      <articles
        v-for="(item,index) in list"
        :key="index"
        :arr='item'
        :i='index'
        :arry="list"
      />
    </van-list>

  </div>
</template>

<script>
import { getListOfResults } from "@/api/search.js";
let page = 1
import articles from "../Home/components/articles.vue";
//导入局部组件必须在scrip里面导入,在App里面导入
export default {
  // 组件名称
  name: '',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 接收局部注册的组件
  components: {
    articles
  },
  // 组件数据
  data () {
    return {
      val: null,
      list: [],
      loading: false,
      done: false
    }
  },
  computed: {
    txt () {
      return this.$route.params.id
    }
  }
  ,
  activated () {
    this.list = []
    this.val = this.txt
    this.getSearch()
    // console.log(arr.data.data.results);
  },
  methods: {
    pullMoreFn () {
      if (this.list.length > 0) {
        this.getSearch()
      }
    },
    async getSearch () {
      let arr = await getListOfResults({
        val: this.val,
        page: page++
      })
      if (arr.data.data.results.length < 10) {
        this.done = true
        return
      }
      this.list = [...this.list, ...arr.data.data.results]
      this.loading = false
    }

  }
}
</script>
<style lang='less' scoped>
.search-result-container {
  padding-top: 46px;
}
</style>